<template>
  <div>
    <div v-if="tableData.length===0" style="font-size: 14px;color: #333;">暂无会议</div>
    <el-row v-for="(item,index) in tableData" :key="index" type="flex" class="row-bg">
      <div class="item-top">
        <div class="grid-content">
          <el-tag style="margin-right: 4px;">
            <span v-if="item.Type==='Resolution'">决议会议</span>
            <span v-else-if="item.Type==='Ordinary'">普通会议</span>
          </el-tag>
          <span>{{ item.Name }}</span>
        </div>
        <div class="grid-content item-time">
          <span v-if="item.State === 'ToDo'" class="color-main">未开始</span>
          <span v-if="item.State === 'Doing'" class="color-main">进行中</span>
          <span v-if="item.State === 'Done'" class="color-end">已结束</span>
          <span v-if="item.State === 'Cancel'" class="color-special">已取消</span>
        </div>
        <el-button class="detail-btn" type="text" size="medium" @click="toMeetingDetail(item)">详情</el-button>
      </div>
      <div class="item-bootom">
        <div class="grid-content">{{ dateFormat1('yyyy-mm-dd HH:MM:SS', item.CreatedAt) }}</div>
        <div class="grid-content item-time">{{ item.Creator.Name }}</div>
        <div v-if="item.Type==='Resolution'" class="grid-content item-address">{{ item.MeetingSummary?`会议结论：${item.MeetingSummary.Conclusion}`:'' }}</div>
      </div>
    </el-row>
    <pagination
      v-show="total>10"
      style="display:flex;justify-content:flex-end;"
      :total="total"
      :page.sync="queryData.pager.skip"
      :limit.sync="queryData.pager.limit"
      @pagination="getMeetingList"
    />
  </div>
</template>

<script>
import { meetingList } from '@/api/projectInformation'
export default {
  props: {
    projectId: {
      type: String,
      default: () => {}
    }
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryData: {
        meeting_type: 'demand',
        relation_id: this.projectId,
        pager: {
          limit: 50,
          skip: 1
        }
      }
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getMeetingList()
  },
  methods: {
    getMeetingList() {
      meetingList(this.queryData).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.tableData = res.data.data || []
          this.total = res.data.total || 0
        }
      })
    },
    toMeetingDetail(row) {
      this.$comFun.goMeetingView(row.Id)
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "@/styles/variables.scss";
.row-bg{
  padding: $block-y 0px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  .item-top{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: $block-space-y;
    .item-time{
      color: $font-color-info;
    }
  }
  .item-bootom{
    display: flex;
    align-items: center;
    .item-address{
      margin-left: $block-x;
    }
  }
}
.grid-content{
  font-size: $font-size-main;
  color: $font-color-main;
  line-height: 24px;
  margin-right: 40px;
}
</style>
